<template>
  <div class="container">
    <div class="title">发送邮件</div>
    <el-input
      style="margin-bottom: 16px"
      placeholder="请输入内容"
      v-model="sendData.sendUser"
      :disabled="true"
    >
      <template #prepend>发送人</template>
    </el-input>
    <el-input
      style="margin-bottom: 16px"
      placeholder="all表示发送给所有人、输入对方账号发送给单独一人"
      v-model="sendData.addressee"
    >
      <template #prepend>收件人</template>
    </el-input>
    <div style="margin-bottom:16px;">
      <span style="padding:8px 20px;background-color:#F5F7FA;color:#909399;border:1px solid #DCDFE6;margin-right:20px;">邮件类型</span>
      <el-radio-group v-model="sendData.core">
    <el-radio :label="1">系统邮件</el-radio>
    <el-radio :label="2">用户邮件</el-radio>
    <el-radio :label="3">结缘邮件</el-radio>
  </el-radio-group>
    </div>
    <el-input
      style="margin-bottom: 16px"
      placeholder="是否允许回复:YES OR NO"
      v-model="sendData.reply"
    >
      <template #prepend>回复？</template>
    </el-input>
    <el-input
      style="margin-bottom: 16px"
      placeholder="请输入邮件标题"
      v-model="sendData.title"
    >
      <template #prepend>标题</template>
    </el-input>
    <el-input
      style="margin-bottom: 16px"
      type="textarea"
      :autosize="{ minRows: 2, maxRows: 8 }"
      placeholder="请输入内容"
      v-model="sendData.content"
    >
    </el-input>
    <el-button style="width: 100%" @click="submitFun" plain>提 交</el-button>
  </div>
</template>

<script>
import sendEmailJS from "./sendEmail.js";
import { toRefs } from "vue";
export default {
  name: "sendEmail",
  setup() {
    let {
      status,
      methodFun: { submitFun },
    } = sendEmailJS();
    let { sendData } = toRefs(status);
    return {
      sendData,
      submitFun,
    };
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 700px !important;
  height: auto !important;
  box-sizing: border-box;
  padding: 20px;
  background-color: rgba(255, 255, 255, 0.3);
  margin: 0px auto;
  border-radius: 16px;
  box-shadow: 1px 2px 10px 2px #333;
  .title {
    line-height: 50px;
    font-size: 30px;
    text-align: center;
    margin-bottom: 20px;
    font-family: "kaiti";
  }
}
</style>
